---
title: Déployer votre site Astro depuis Zerops
description: Comment déployer votre site Astro sur le web en utilisant Zerops.
sidebar:
  label: Zerops
type: deploy
logo: zerops
supports: ['ssr', 'static']
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components';

[Zerops](https://zerops.io/) est une plateforme cloud axée sur le développement qui peut être utilisée pour déployer des sites Astro statiques et SSR.

Ce guide vous guidera dans la configuration et le déploiement de sites Astro statiques et SSR sur Zerops.


:::tip[Démarrage rapide Astro x Zerops]

Vous voulez tester Astro sur Zerops sans rien installer ni configurer ? En utilisant les dépôts [Zerops x Astro - Static](https://github.com/zeropsio/recipe-astro-static) ou [Zerops x Astro - SSR avec Node.js](https://github.com/zeropsio/recipe-astro-nodejs), vous pouvez déployer un exemple de site Astro en un seul clic.

:::

L'exécution d'applications sur Zerops nécessite deux étapes :
1. Création d'un projet
2. Déclenchement du pipeline de compilation et de déploiement

:::note
Un projet Zerops peut contenir plusieurs sites Astro.
:::

## Site Astro Static sur Zerops

### Création d'un projet et d'un service pour Astro Static
Les projets et les services peuvent être ajoutés soit par un assistant [`Project add`](https://app.zerops.io/dashboard/project-add), soit importés en utilisant une structure yaml :

```yaml
# voir https://docs.zerops.io/references/import pour la référence complète
project:
  name: recipe-astro
services:
  - hostname: app
    type: static
```

Cela va créer un projet appelé `recipe-astro` avec un service Zerops Static appelé `app`.

### Déploiement de votre site Astro Static

Pour indiquer à Zerops comment construire et exécuter votre site, ajoutez un `zerops.yml` à votre dépôt :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```yaml title="zerops.yml"
    # voir https://docs.zerops.io/zerops-yml/specification pour la référence complète
    zerops:
    - setup: app
    build:
    base: nodejs@20
    buildCommands:
    - npm i
    - npm build
    deployFiles:
    - dist/~
    run:
    base: static
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```yaml title="zerops.yml"
    # voir https://docs.zerops.io/zerops-yml/specification pour la référence complète
    zerops:
    - setup: app
    build:
    base: nodejs@20
    buildCommands:
    - pnpm i
    - pnpm build
    deployFiles:
    - dist/~
    run:
    base: static
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```yaml title="zerops.yml"
    # voir https://docs.zerops.io/zerops-yml/specification pour la référence complète
    zerops:
    - setup: app
    build:
    base: nodejs@20
    buildCommands:
    - yarn
    - yarn build
    deployFiles:
    - dist/~
    run:
    base: static
    ```
  </Fragment>
</PackageManagerTabs>

Maintenant, vous pouvez [déclencher le pipeline de compilation et de déploiement en utilisant la CLI de Zerops](#déclencher-le-pipeline-en-utilisant-la-cli-de-zerops-zcli) ou en connectant le service `app` à votre dépôt [GitHub](https://docs.zerops.io/references/github-integration/) / [GitLab](https://docs.zerops.io/references/gitlab-integration) depuis le détail du service.


## Site Astro SSR sur Zerops

### Mettre à jour les scripts

Mettez à jour votre script `start` pour exécuter la sortie serveur de l'adaptateur Node.

```json title="package.json"
"scripts": {
  "start": "node ./dist/server/entry.mjs",
} 
```

### Création d'un projet et d'un service pour Astro SSR (Node.js)
Les projets et les services peuvent être ajoutés soit par un assistant [`Project add`](https://app.zerops.io/dashboard/project-add), soit importés en utilisant une structure yaml :

```yaml
# voir https://docs.zerops.io/references/import pour la référence complète
project:
  name: recipe-astro
services:
  - hostname: app
    type: nodejs@20
```

Cela créera un projet appelé `recipe-astro` avec un service Node.js Zerops appelé `app`.

### Déploiement de votre site Astro SSR

Pour indiquer à Zerops comment compiler et exécuter votre site en utilisant l'adaptateur officiel [Node.js d'Astro](/fr/guides/integrations-guide/node/) en mode `standalone`, ajoutez un fichier `zerops.yml` à votre dépôt :


<PackageManagerTabs>
  <Fragment slot="npm">
    ```yaml title="zerops.yml"
    # voir https://docs.zerops.io/zerops-yml/specification pour la référence complète
    zerops:
    - setup: app
    build:
    base: nodejs@20
    buildCommands:
    - npm i
    - npm run build
    deployFiles:
    - dist
    - package.json
    - node_modules
    run:
    base: nodejs@20
    ports:
    - port: 3000
    httpSupport: true
    envVariables:
    PORT: 3000
    HOST: 0.0.0.0
    start: npm start
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```yaml title="zerops.yml"
    # voir https://docs.zerops.io/zerops-yml/specification pour la référence complète
    zerops:
    - setup: app
    build:
    base: nodejs@20
    buildCommands:
    - pnpm i
    - pnpm run build
    deployFiles:
    - dist
    - package.json
    - node_modules
    run:
    base: nodejs@20
    ports:
    - port: 3000
    httpSupport: true
    envVariables:
    PORT: 3000
    HOST: 0.0.0.0
    start: pnpm start
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```yaml title="zerops.yml"
    # voir https://docs.zerops.io/zerops-yml/specification pour la référence complète
    zerops:
    - setup: app
    build:
    base: nodejs@20
    buildCommands:
    - yarn
    - yarn build
    deployFiles:
    - dist
    - package.json
    - node_modules
    run:
    base: nodejs@20
    ports:
    - port: 3000
    httpSupport: true
    envVariables:
    PORT: 3000
    HOST: 0.0.0.0
    start: yarn start
    ```
  </Fragment>
</PackageManagerTabs>

Maintenant, vous pouvez [déclencher le pipeline de compilation et de déploiement en utilisant la CLI de Zerops](#déclencher-le-pipeline-en-utilisant-la-cli-de-zerops-zcli) ou en connectant le service `app` à votre dépôt [GitHub](https://docs.zerops.io/references/github-integration/) / [GitLab](https://docs.zerops.io/references/gitlab-integration) depuis le détail du service.

## Déclencher le pipeline en utilisant la CLI de Zerops (zcli)

<Steps>
  1. Installez la CLI de Zerops.
      ```shell
      # Pour télécharger le binaire zcli directement,
      # utilisez https://github.com/zeropsio/zcli/releases
      npm i -g @zerops/zcli
      ```

  2. Ouvrez [`Settings > Access Token Management`](https://app.zerops.io/settings/token-management) dans l'application Zerops et générez un nouveau jeton d'accès.

  3. Connectez-vous en utilisant votre jeton d'accès avec la commande suivante :
      ```shell
      zcli login <token>
      ```

  4. Naviguez jusqu'à la racine de votre application (où se trouve `zerops.yml`) et exécutez la commande suivante pour déclencher le déploiement :
      ```shell
      zcli push
      ```
</Steps>

## Ressources
### Officielles

- [Créer un compte Zerops](https://app.zerops.io/registration)
- [Documentation de Zerops](https://docs.zerops.io)
- [Recette Astro de Zerops](https://app.zerops.io/recipe/astro)

### Communautaires
- [Déployer Astro depuis Zerops en 3 minutes](https://medium.com/@arjunaditya/how-to-deploy-astro-to-zerops-4230816a62b4) (Anglais)
- [Déployer Astro SSG avec Node.js sur Zerops avec One Click Deploy](https://youtu.be/-4KTa4VWtBE) (Anglais)
- [Deployer Astro SSR avec Node.js sur Zerops avec One Click Deploy](https://youtu.be/eR6b_JnDH6g) (Anglais)
